原生微信小程序转化uniapp项目的神操作 |
您所在的位置：网站首页 › 微信小程序开发 开头空格 › 原生微信小程序转化uniapp项目的神操作 |
原生微信小程序转化uniapp项目的神操作
|
前言
可能有些朋友只知道能将uniapp编译成微信小程序，但是没想到原生微信小程序也能编译成uniapp项目，这里推荐一款【miniprogram-to-uniapp】小程序转换工具插件 原理核心是使用Babel获取AST（词法分析)，然后或使用Babel自带函数增删，或正则分析替换等等操作。 可能有的朋友觉得，这种为啥不是纯正则分析？ 纯正则可以解决一部分问题，对于标签与标签内容，其实正则是很难进行区分的哈。 开始安装 步骤一在命令行里，运行【 npm install miniprogram-to-uniapp -g 】进行安装，因为这个包是工具，要求全局都能使用，所以需要-g进行全局安装。 在命令行里，运行【 wtu -V 】，执行结果如下 没报错时输入set-ExecutionPolicy RemoteSigned 生成前旧的文件夹文件对比 1，删除 const app = getApp(); 2，以 wx. 开头的方法更新为 uni. 开头 3，数据绑定 this.setData({ a : 1 }) 更新为 this.a = 1 4，路由跳转 wx.navigateTo() 更新为uni.navigateTo() 5，属性绑定从 attr="{{ a }}"，改为 :attr="a" title="复选框{{ item }}" 改为 :title="'复选框' + item" 6、部分页面生命周期释义，详见页面生命周期 onPullDownRefresh：监听用户下拉动作，一般用于下拉刷新 onReachBottom：页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据 onShareAppMessage：用户点击右上角分享 onPageScroll：监听页面滚动 css部分 css转换可能失败，大部分是单位转换失败，原px乘2，改为rpx即可 盒子模型的问题（小程序默认content-box,uniapp默认样式border-box），修改box-sizing即可 附言vue h5项目转换uni-app指南：ask.dcloud.net.cn/article/361… 微信小程序转换uni-app指南及转换器：ask.dcloud.net.cn/article/357… wepy转uni-app转换器：github.com/zhangdaren/… 另一种有效的wepy转uni-app方法： ask.dcloud.net.cn/article/391… mpvue 项目（组件）迁移指南、示例及资源汇总：ask.dcloud.net.cn/article/349… |
【本文地址】
今日新闻 |
推荐新闻 |